﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:local="clr-namespace:myBoard.App.Components.MagnetsStore" xmlns:myBoard_App_Model="clr-namespace:myBoard.App.Model" x:Class="myBoard.App.Components.MagnetsStore.MagnetScreen" FontFamily="Candara" Foreground="#FF616161" Width="Auto">
	<UserControl.Resources>
    <myBoard_App_Model:Instances x:Key="InstancesDataSource" d:IsDataSource="True"/>
		<DataTemplate x:Key="MagnetScreenshotsDataTemplate">
			<Grid>
				<Image Width="200" Height="200" Source="{Binding Mode=Default}" Stretch="UniformToFill"/>
			</Grid>
		</DataTemplate>
		<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
			<WrapPanel IsItemsHost="True"/>
		</ItemsPanelTemplate>
		<SolidColorBrush x:Key="ListBorder" Color="#828790"/>
		<Style x:Key="MagnetScreenshotsStyle" TargetType="{x:Type ItemsControl}">
			<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
			<Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
			<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
			<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
			<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
			<Setter Property="VerticalContentAlignment" Value="Center"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type ListBox}">
						<Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="1">
							<ScrollViewer Padding="{TemplateBinding Padding}" Focusable="false">
								<ItemsPresenter MaxWidth="870" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
							</ScrollViewer>
						</Border>
						<ControlTemplate.Triggers>
							<Trigger Property="IsEnabled" Value="false">
								<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
							</Trigger>
							<Trigger Property="IsGrouping" Value="true">
								<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Storyboard x:Key="ShowReviews">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="_magnetReviewsControl" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
				<SplineDoubleKeyFrame KeySpline="0,1,1,1" KeyTime="00:00:00.5000000" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
				<SplineDoubleKeyFrame KeySpline="0,1,1,1" KeyTime="00:00:00.5000000" Value="-890"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Key="HideReviews">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
				<SplineDoubleKeyFrame KeySpline="0,1,1,1" KeyTime="00:00:00.5000000" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="_magnetReviewsControl" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
				<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="890" KeySpline="0,1,1,1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>
	<UserControl.Triggers>
		<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="_reviewsBt">
			<BeginStoryboard Storyboard="{StaticResource ShowReviews}"/>
		</EventTrigger>
	</UserControl.Triggers>
	<Grid>
		<Grid x:Name="grid" Margin="0" d:LayoutOverrides="Height" RenderTransformOrigin="0.5,0.5">
			<Grid.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform/>
				</TransformGroup>
			</Grid.RenderTransform>
			<Grid.Background>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FFD2D2D2" Offset="1"/>
					<GradientStop Color="White"/>
				</LinearGradientBrush>
			</Grid.Background>
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto"/>
				<RowDefinition Height="100"/>
				<RowDefinition Height="Auto"/>
				<RowDefinition Height="Auto"/>
				<RowDefinition Height="Auto"/>
				<RowDefinition Height="Auto" MinHeight="39.3"/>
			</Grid.RowDefinitions>
			<Grid Grid.Row="1">
				<Grid.Background>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<GradientStop Color="#FFABABAB" Offset="0"/>
						<GradientStop Offset="0.102"/>
					</LinearGradientBrush>
				</Grid.Background>
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="0.089*"/>
					<ColumnDefinition Width="0.911*"/>
				</Grid.ColumnDefinitions>
				<Grid Margin="0,10,0,0">
					<Grid.RowDefinitions>
						<RowDefinition Height="0.5*"/>
						<RowDefinition Height="0.5*"/>
					</Grid.RowDefinitions>
				
					<Image x:Name="_thumbnailImg" Margin="0" Source="{Binding ThumbnailUrl, Mode=Default}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
					<Rectangle x:Name="rectangle" Grid.Row="1" Width="{Binding ActualWidth, ElementName=_thumbnailImg, Mode=Default}" Height="{Binding ActualHeight, ElementName=_thumbnailImg, Mode=Default}" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center">
						<Rectangle.Fill>
							<VisualBrush Visual="{Binding ElementName=_thumbnailImg}"/>
						</Rectangle.Fill>
						<Rectangle.RenderTransform>
							<TransformGroup>
								<ScaleTransform ScaleX="1" ScaleY="-1"/>
								<SkewTransform AngleX="0" AngleY="0"/>
								<RotateTransform Angle="0"/>
								<TranslateTransform/>
							</TransformGroup>
						</Rectangle.RenderTransform>
						<Rectangle.OpacityMask>
							<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
								<GradientStop Color="#00000000" Offset="0.469"/>
								<GradientStop Color="#E4FFFFFF" Offset="1"/>
							</LinearGradientBrush>
						</Rectangle.OpacityMask>
					</Rectangle>
				</Grid>
				<StackPanel HorizontalAlignment="Left" Margin="9,10,0,0" VerticalAlignment="Top" Orientation="Vertical" d:LayoutOverrides="VerticalAlignment" Grid.Column="1">
					<TextBlock x:Name="_nameLbl" Text="{Binding Name, Mode=Default}" TextWrapping="Wrap" FontSize="18.667" d:LayoutOverrides="Width, GridBox" FontFamily="Aharoni"/>
					<StackPanel Orientation="Horizontal">
						<local:Ratings Margin="0" MaxRating="5" Rating="{Binding Rating, Mode=Default}"/>
						<Button x:Name="_reviewsBt" Cursor="Hand" Style="{DynamicResource TransparentButtonStyle}" Content="Reviews" Foreground="#FF3793B0" Margin="0"/>
					</StackPanel>
					<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,10,0,0">
						<Button x:Name="_backBt" VerticalAlignment="Center" Content="Back" HorizontalAlignment="Left" Margin="0" Style="{DynamicResource StoreButtonStyle1}" Width="50" Height="20" Foreground="White" Cursor="Hand"/>
						<Button x:Name="_installMagnetBt" VerticalAlignment="Center" Height="20" Content="Install" HorizontalAlignment="Left" Margin="10,0,0,0" Style="{DynamicResource StoreButtonStyle1}" Width="50" Foreground="White" Cursor="Hand" Command="{Binding DownloadMagnetCommand, Mode=Default}" CommandParameter="{Binding Mode=OneWay}"/>
					</StackPanel>
					<ProgressBar x:Name="_downloadProgresssBar" Height="10" Margin="0,10,0,0" Value="{Binding DownloadProgress, Mode=OneWay}" Visibility="Hidden"/>
				</StackPanel>
			</Grid>
			<Border BorderThickness="0,0,0,1" BorderBrush="#FFEAEAEA" Visibility="Collapsed" Grid.Row="1" d:LayoutOverrides="GridBox">
				<Border.Background>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<GradientStop Color="#FFA6E7FC" Offset="0.938"/>
						<GradientStop Color="#FF73D4F4" Offset="0.51"/>
						<GradientStop Color="#FFA6E7FC" Offset="0.502"/>
						<GradientStop Color="#FFA6E7FC"/>
						<GradientStop Color="#FF73D4F4" Offset="1"/>
					</LinearGradientBrush>
				</Border.Background>
				<Grid>
					<TextBlock Text="Info" TextWrapping="Wrap" Foreground="#FFC3F0FF" FontSize="21.333" d:LayoutOverrides="Width, Height" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,3,0,0"/>
					<TextBlock HorizontalAlignment="Center" FontSize="21.333" Foreground="#FF033B4D" Text="Info" TextWrapping="Wrap" d:LayoutOverrides="Height" VerticalAlignment="Center"/>
				</Grid>
			</Border>
			<TextBlock HorizontalAlignment="Left" Margin="10,9.999,0,10" Text="{Binding LongDesc, Mode=Default}" TextWrapping="Wrap" d:LayoutOverrides="Height" Grid.Row="2"/>
			<Border Margin="0" Grid.Row="4">
				<Border.Background>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<GradientStop Color="#FF767676" Offset="0"/>
						<GradientStop Color="#FF767676" Offset="1"/>
						<GradientStop Color="#FFA5A5A5" Offset="0.07"/>
						<GradientStop Color="#FFA5A5A5" Offset="0.93"/>
					</LinearGradientBrush>
				</Border.Background>
				<ItemsControl ItemTemplate="{DynamicResource MagnetScreenshotsDataTemplate}" ItemsSource="{Binding ScreenshotsUrl, Mode=Default}" ItemsPanel="{DynamicResource ItemsPanelTemplate1}"  Background="{x:Null}" BorderBrush="{x:Null}" Margin="10"/>
			</Border>
			<StackPanel Margin="0" Grid.Row="5">
				<Grid Margin="0,5,0,0">
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="0.5*"/>
						<ColumnDefinition Width="0.5*"/>
					</Grid.ColumnDefinitions>
					<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Margin="0,0,10,0" FontWeight="Bold" Foreground="#FF8C8C8C" Text="Version" d:LayoutOverrides="Height, GridBox"/>
					<TextBlock HorizontalAlignment="Left" Text="{Binding Version, Mode=Default}" TextWrapping="Wrap" d:LayoutOverrides="Height, GridBox" Margin="0" Grid.Column="1"/>
				</Grid>
				<Grid Margin="0,5,0,0">
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="0.5*"/>
						<ColumnDefinition Width="0.5*"/>
					</Grid.ColumnDefinitions>
					<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Margin="0,0,10,0" FontWeight="Bold" Foreground="#FF8C8C8C" Text="Last update" d:LayoutOverrides="Height, GridBox"/>
					<TextBlock HorizontalAlignment="Left" Text="{Binding LastUpdate, Mode=Default}" TextWrapping="Wrap" d:LayoutOverrides="Height, GridBox" Margin="0" Grid.Column="1"/>
				</Grid>
			</StackPanel>
		</Grid>
		<local:MagnetReview x:Name="_magnetReviewsControl" Margin="0,0,0,-0.001" RenderTransformOrigin="0.5,0.5" d:LayoutOverrides="Height" DataContext="{Binding MagnetCommentsViewModel, Mode=Default}" ForMagnet="{Binding MagnetsViewModel.SelectedMagnet, Mode=OneWay, Source={StaticResource InstancesDataSource}}">
			<local:MagnetReview.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform X="890"/>
				</TransformGroup>
			</local:MagnetReview.RenderTransform>
		</local:MagnetReview>
	</Grid>
</UserControl>
